<%-- 
    Document   : wizard
    Created on : 04/03/2013
    Author     : Volodymyr Lavrynovych <volodya.lavrynovych@gmail.com>
--%>

<%@page import="mygang.controller.AbstractController"%>
<%@page import="mygang.helper.ApplicationContentHelper"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="mg" tagdir="/WEB-INF/tags"%>
<%
    String title = "Manage wizards";
    ApplicationContentHelper helper = new ApplicationContentHelper(request);
%>
<!DOCTYPE html>
<html>
    <head>
        <%=helper.getJQueryDataTable()%>
        <mg:import file="model/manage.js"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title><%=title%></title>
        <script type="text/javascript">
            $(document).ready(function(){
                var composeButton = uic.element.button({
                    title: 'Compose',
                    icon: 'icon-cog',
                    onclick: function(){
                        var id = model.getId();
                        if(id==null) return;
                        
                        dialogManager.open({
                            url: "manager/wizard/c",
                            data: {
                                id: id
                            },
                            width: 800,
                            height: 600,
                            modal: true,
                            resizable: false,
                            title: 'Compose \''+model.dt.table.find('tr#'+id+' > td:eq(0)').text()+'\' Wizard'
                        })
                    }
                }).getElement();
                
                var previewButton = uic.element.button({
                    title: 'Preview',
                    icon: 'icon-eye-open',
                    onclick: function(){
                        var id = model.getId();
                        if(id==null) return;
                        location = '<mg:baseurl/><%=AbstractController.WIZARD_HANDLER%>/'+id;
                    }
                }).getElement();
                
                model = new ManageModel({
                    title: '<%=title%>',
                    itemName: 'Wizard',
                    actions: {
                        url: '<%=AbstractController.MANAGE_WIZARD%>/'
                    },
                    tableOptions: {
                        prepareRow: function(obj){
                            var $row = $('<tr>').attr('id', obj.id).attr('hasStep', obj.steps.length>0 ? true : '');
                            var $title = $('<td>').text(obj.title);
                            var $description = $('<td>').text(obj.description);
                            var $type = $('<td>').text(obj.type.name);
                            return $row.append($title).append($description).append($type);
                        },
                        buttonGroups: [
                            [composeButton],
                            [previewButton]
                        ],
                        updateToolbar: function(){
                            var hasSelected = model.dt.getSelected().size()>0;
                            if(model.settings.actions.e) model.editButton[0].wrapper.setEnabled(hasSelected);
                            if(model.settings.actions.d) model.deleteButton[0].wrapper.setEnabled(hasSelected);
                            composeButton[0].wrapper.setEnabled(hasSelected);
                            previewButton[0].wrapper.setEnabled(hasSelected && model.dt.getSelected().attr('hasStep'));
                        }
                    }
                });
            })
        </script>
    </head>
    <body>
        <div class='target'>
            <table id="dataTable">
                <thead>
                    <tr class="table-caption">
                        <th style="width: 40%;">Title</th>
                        <th style="width: 40%;">Description</th>
                        <th style="width: 20%;">Type</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </body>
</html>
